<template>
    <div id="app">
    <header>
        <img :src="imgUrl" height="250px" width="100%" />
        <div class="box">
        <h2>{{name}}</h2>
        <p>月售{{sellCount}}份 好评率<span>{{rating}}</span>%</p>
        <div class="price">
            <div class="priceBox">
            <h2>￥{{price}}</h2>
            <i>￥{{price+10}}</i>
            </div>
            <van-button round type="info" color="#ffc300">加入购物车</van-button>
        </div>
        </div>
    </header>
    <main>
        <h2>商品介绍</h2>
        <div>
        {{goodsDesc}}
        </div>
    </main>
    <footer>
        <van-tabs type="card" title-active-color="#000" color="#ffc300">
        <van-tab title="全部90">全部90</van-tab>
        <van-tab title="推荐50">推荐50</van-tab>
        <van-tab title="吐槽40">吐槽40</van-tab>
        </van-tabs>
    </footer>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {detailed} from "../utils/interface"
@Component
export default class App extends Vue {
    category:string = ""
    ctime:string = ""
    goodsDesc:string = ""
    id:string = ""
    imgUrl:string = ""
    name:string = ""
    price:string = ""
    rating:string = ""
    ratings = []
    sellCount:string = ""
    created() {
        let food:any = this.$route.query
        food = JSON.parse(food.obj)
        // console.log(food);
        if (food) {
            this.category =food.category
            this.ctime =food.ctime
            this.goodsDesc =food.goodsDesc
            this.id =food.id
            this.imgUrl =food.imgUrl
            this.name =food.name
            this.price =food.price
            this.rating =food.rating
            this.sellCount =food.sellCount
        }
    }
}
</script>

<style scoped>
html,
body {
    width: 100%;
    height: 100%;
}
#app {
    background: rgb(244, 245, 247);
}
header {
    height: 50%;
    background: #fff;
}
.box {
    padding: 10px;
}
header h2 {
    font-size: 20px;
}
header .box p {
    color: rgb(157, 157, 157);
    font-size: 14px;
    padding: 0;
}
.van-button--round {
    color: black !important;
}
.price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price h2 {
    color: red;
    font-size: 22px;
    display: inline-block;
}
.priceBox {
    display: inline-block;
}
i {
    text-decoration: line-through;
}
main {
    margin: 25px 0;
    background: #fff;
    padding: 10px;
}
main h2 {
    font-weight: normal;
    margin: 0;
}
main div {
    margin: 15px 0;
}
footer {
    background: #fff;
    padding: 10px;
}
</style>
